import {
  Component, ChangeDetectionStrategy,
  Input, HostListener, OnChanges, SimpleChanges, Output, EventEmitter,
  HostBinding
} from '@angular/core';

@Component({
  selector: 'avt-option',
  template: `
    <div class="opt-container multi-opt" *ngIf="mode === 'multi'">
      <svg *ngIf="isChecked" width="88%" height="88%"
           style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)"
           viewBox="0 0 100 100" version="1.1"
           xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="0" width="100" height="100" fill="#fff" />
        <path d="M20 50 L45 80 L85 20"
              stroke="#546e95"
              fill="#fff"
              stroke-linejoin="round"
              stroke-linecap="round"
              stroke-width="12"
              style="animation: dash .3s ease reverse; stroke-dasharray: 111.62; "
        />
      </svg>
    </div>
      <div *ngIf="mode === 'single'" class="opt-container single-opt">
        <div *ngIf="isChecked" class="inner-circle"></div>
      </div>
    <span class="avt-option-label">
      <ng-content></ng-content>
    </span>
  `,
  styles: [
    `
      :host {
        align-items: center;
        padding: 3px 8px;
        cursor: pointer;
      }

      :host.disabled-opt {
        cursor: not-allowed;
      }
      :host.disabled-opt .opt-container {
        border: 2px solid #ccc;
      }
      :host.disabled-opt .opt-container>svg>path {
        stroke: #ccc;
      }
      :host.disabled-opt .opt-container>.inner-circle {
        background-color: #ccc;
      }
      :host.disabled-opt .avt-option-label {
        color: #c28d8d;
      }

      :host:hover {
        background-color: #e4eaec;
      }

      .opt-container {
        border: 2px solid #ccc;
      }
      @keyframes dash {
        to {
          stroke-dashoffset: 111.62;
        }
      }

      .opt-container {
        width: 20px;
        height: 20px;
        display: inline-block;
        border: 2px solid #546e95;
        position: relative;
      }

      .single-opt {
        border-radius: 50%;
      }

      .inner-circle {
        background-color: #546e95;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .multi-opt {
        background-color: #fff;
        border-radius: 2px;
      }

      .avt-option-label {
        font-size: 16px;
        margin-left: 10px;
        color: #546e95;
      }
    `
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AvtOptionComponent implements OnChanges {

  @Input() mode: 'single' | 'multi' = 'single';
  @Input() value = '';
  @Input() isChecked: boolean = false;
  @Output() isCheckedChange = new EventEmitter<boolean>();
  @HostBinding('class.disabled-opt') @Input() disabled = false;
  @HostBinding('style.width') @Input() width = '';
  @HostBinding('style.display') @Input() display = 'inline-flex';


  @HostListener('click') valChange() {
    if (this.disabled) { return; }
    const nextVal = !this.isChecked;
    this.isChecked = nextVal;
    this.isCheckedChange.emit(nextVal);
  }

  ngOnChanges(changes: SimpleChanges) {
    const { mode, isChecked, disabled } = changes;
    if (mode) {
      this.mode = mode.currentValue;
    }
    if (isChecked) {
      this.isChecked = isChecked.currentValue;
    }
    if (disabled) {
      this.disabled = disabled.currentValue;
    }
  }

}
